<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bidding Online System, Merlion University</title>
<link href="bootstrap-3.0.0-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- -->
<link href="bootstrap-3.0.0-dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<!-- -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/general.css"/>
<link rel="stylesheet" type="text/css" href="css/bs-example.css"/>
<link href="css/navbar-customized.css" rel="stylesheet" type="text/css" />
<script>

</script>
</head>

<body>

<!-- start of navbar -->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#"><span>Bidding Online System</span></a> </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-th-list"></i> course offerings</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-usd"></i> my current bids</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-check"></i> bidding results</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-shopping-cart"></i> section cart</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-user"></i> logout</a></li>
      </ul>
    </div>
    <!--/.nav-collapse --> 
  </div>
</div>
<!-- end of navbar -->

<div class="container theme-showcase panel panel-default box-shadow content-box">
  <div class="page-header">
    <h1>Course Offerings For Round 1</h1>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Select School</h3>
        </div>
        <div class="list-group"> <a href="#" class="list-group-item active"> All </a> <a href="#" class="list-group-item">SOE</a> <a href="#" class="list-group-item">SIS</a> <a href="#" class="list-group-item">SOA</a> <a href="#" class="list-group-item">SOB</a> </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Select Course</h3>
        </div>
        <div class="panel-body">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter by name or description">
            <span class="input-group-btn">
            <button class="btn btn-primary" type="button">
            	&nbsp;<i class="glyphicon glyphicon-search"></i>&nbsp;
            </button>
            </span> </div>
          <!-- /input-group --> 
        </div>
        <div class="list-group"> <a href="#" class="list-group-item active"><span class="badge">3</span>
          <h4 class="list-group-item-heading">Economics 101</h4>
          <p class="list-group-item-text">Description of the course goes here...</p>
          </a> <a href="#" class="list-group-item"><span class="badge">13</span>
          <h4 class="list-group-item-heading">Economics 101</h4>
          <p class="list-group-item-text">Description of the course goes here...</p>
          </a></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Select Section</h3>
        </div>
        <div class="panel-body">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter by name or date and time">
            <span class="input-group-btn">
            <button class="btn btn-primary" type="button">
            	&nbsp;<i class="glyphicon glyphicon-search"></i>&nbsp;
            </button>
            </span> </div>
        </div>
        
        
        <table class="table table-hover table-striped table-condensed">
        <thead>
          <tr>
            <th>Section</th>
            <th>Date/Time</th>
            <th>Instructor</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>S1</td>
            <td>Mon, 0815 - 1130</td>
            <td>Otto Bara</td>
            <td><button type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-shopping-cart"></i> Add</button></td>
          </tr>
          <tr class="success">
            <td>S2</td>
            <td>Tue, 0815 - 1130</td>
            <td>Otto Ng</td>
            <td><button type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-shopping-cart"></i> Remove</button></td>
          </tr>
          <tr>
            <td>S3</td>
            <td>Wed, 0815 - 1130</td>
            <td>Otto Smith</td>
            <td><button type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-shopping-cart"></i> Add</button></td>
          </tr>
          <tr>
            <td>S3</td>
            <td>Wed, 0815 - 1130</td>
            <td>Otto Smith</td>
            <td><button type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-shopping-cart"></i> Add</button></td>
          </tr>
        </tbody>
      </table>
        
      </div>
    </div>
  </div>
</div>
<!-- /container --> 

<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="bootstrap-3.0.0-dist/js/bootstrap.min.js"></script> 
<script src="js/holder.js"></script>
</body>
</html>
